<template>
	<view>
		<view class="me-edit-body-container">
			<view class="me-edit-body-part">
				<view class="me-edit-body-item" @click="goPic">
					<view class="me-edit-label">编辑头像</view>
					<image class="me-edit-body-image" src="../../static/go.png" mode="widthFix"></image>
					<image class="me-edit-user-image" src="../../static/logo.png" mode="widthFix"></image>
				</view>
				<view class="me-edit-body-item">
					<view class="me-edit-label">昵称</view>：<input  type="text" placeholder="请输入昵称" v-model="data.myinfo.nickname" class="me-edit-value">
				</view>
				<view class="me-edit-body-item">
					<view class="me-edit-label">个性签名</view>：<textarea auto-height="true" style="min-height: 100rpx;" placeholder="请输入个性签名" v-model="data.myinfo.personality_front" class="me-edit-value"></textarea>
				</view>
			</view>
			<view class="me-edit-body-part">
				<view class="me-edit-body-item">
					<view class="me-edit-label">手机号</view>：<input type="text" placeholder="请输入手机号" v-model="data.myinfo.phone" class="me-edit-value">
				</view>
				<view class="me-edit-body-item">
					<view class="me-edit-label">邮箱</view>：<input type="text" placeholder="请输入邮箱" v-model="data.myinfo.email" class="me-edit-value">
				</view>
			</view>
		</view>
		<button @click="changeInfo" class="me-edit-btn">发送修改</button>
	</view>
</template>

<script>
	import {
		onMounted,
		getCurrentInstance,
		reactive,
		onUpdated
	} from 'vue'
	import global from "../../config/global.js"
	export default {
		name: "me-edit",
		setup(value,context) {
			let data = reactive({
				myinfo:{}
			})
			
			onMounted(() => {
				let options = getCurrentInstance();
				data.myinfo = JSON.parse(options.ctx.$scope.options.info)
				// console.log(data)
			})
			
			function changeInfo(){
				uni.request({
					method:"POST",
					url:global.BASE_URL+'/user/modifymyinfo',
					header:{
						mytoken:uni.getStorageSync('localtoken')
					},
					data:{
						"nickname":data.myinfo.nickname,
						"personality_front":data.myinfo.personality_front,
						"phone":data.myinfo.phone,
						"email":data.myinfo.email
					},
					success:(res)=>{
						// console.log(res);
						if(res.data.code){
							uni.showToast({
								icon:'success',
								title:'修改成功',
								duration:1000,
								success: (res) => {
									uni.navigateBack()
								}
							})
						}else{
							uni.showModal({
								title: '修改失败',
								content: res.data.msg,
								showCancel: false,
								confirmText: '确定'
							})
						}
					},
					fail:(err)=>{
						console.log(err)
					}
				})
			}
			
			return {
				data,
				changeInfo
			}
		}
	}
</script>

<style scoped>
	textarea{
		height: 100rpx;
	}
	
	.me-edit-body-container {
		width: 700rpx;
		margin: 10rpx 25rpx;
	}

	.me-edit-body-item {
		position: relative;
		width: 650rpx;
		margin: 0rpx 25rpx;
		display: flex;
		padding: 20rpx 0;
		border-bottom: 2rpx solid #cdcdcd;
		height: fit-content;
		/* align-items: center; */
	}

	.me-edit-label {
		font-size: 36rpx;
		font-weight: bold;
		color: #515151;
		height: 50rpx;
		line-height: 50rpx;
		width: 150rpx;
		margin: 0rpx 5rpx;
		text-align-last: justify;
		text-align: justify;
		text-justify: distribute-all-lines;
	}

	.me-edit-value {
		font-size: 30rpx;
		color: #515151;
		text-align: left;
		min-height: 50rpx;
		line-height: 50rpx;
		width: 470rpx;
		margin: 0rpx 5rpx;
	}

	.me-edit-body-part {
		margin: 40rpx 0rpx;
	}
	
	.me-edit-body-image{
		width: 50rpx;
		position: absolute;
		right: 10rpx;
		bottom: 15rpx;
	}
	
	.me-edit-user-image{
		width: 60rpx;
		position: absolute;
		right: 70rpx;
		border-radius: 100rpx;
	}
	
	.me-edit-btn{
		width: 400rpx;
		padding: 0rpx 25rpx;
		margin: 40rpx 175rpx 10rpx 175rpx;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #9BCDD2;
		color: white;
		font-size: 35rpx;
	}
</style>